import React, {Component} from 'react';
import {footerList} from "@/NewNewTodo/constants";
import classnames from 'classnames'

class Footer extends Component {
  render() {
    const {status, changeStatus, len, clearAll} = this.props
    return (
      <footer className="footer">
        <span className="todo-count"><strong>{len}</strong> item left</span>
        <ul className="filters">
          {
            footerList.map(item => (
              <li key={item.value}>
                <a
                  className={classnames({selected: item.value === status})}
                  href="#/"
                  onClick={changeStatus(item.value)}
                >{item.label}</a>
              </li>
            ))
          }
          {/*<li>*/}
          {/*  <a href="#/active">Active</a>*/}
          {/*</li>*/}
          {/*<li>*/}
          {/*  <a href="#/completed">Completed</a>*/}
          {/*</li>*/}
        </ul>
        <button
          className="clear-completed"
          onClick={clearAll}
        >Clear completed
        </button>
      </footer>
    );
  }
}

export default Footer;
